<html>
<head>
<style type="text/css">
	body {
		height: 100%;
	}
	#cross {
		position:absolute;
		top:160;
		left:90;
	}
	#gameInfo{
		position:absolute;
		top:50;

	}
	
</style>

<title>Argon Alpha Alpha</title>
        <link rel="stylesheet" href="http://pangbo.org/argon/jslog/jslog.css" />
        <link rel="apple-touch-icon" href="assets/sample_icon_57x57.png" />
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
        <meta name="arenabled" />
        
</head>
<body>
	<div id = "cross"></div>
    <div id = "gameInfo"></div>
    <div id = "shootingSFX"></div>
	<!--// include the script //-->
	<script src="http://pangbo.org/argon/jslog/jslog.js"></script>	
    <script src="http://argon.gatech.edu/argon_o.js"></script>
	<script src="http://pangbo.org/mobile/models/ColladaLoader.js"></script>	
	<script>
		defenseGame ={
			geoObject:null,
			enemies:null,
			model:null,
			cube:null,
			loaded:null,
			totleEnemy:null,
			enemiesLeft:null,
			enemiesDir:null,
			enemiesPos:null,
			enemiesDead:null,
			textContext:null,			
			initialization:function(){
				var lat   = ARGON.geolocation.getLLA().latitude;
				var lon   = ARGON.geolocation.getLLA().longitude;
				var alt   = ARGON.geolocation.utm.altitude;
				//console.log("set GeoOjbect at: "+ lat);
				//console.log(lon);
				//console.log(alt);
				
				geoObject = ARGON.createGeoObject(lat,lon,alt);
				var i=0;
				for(var propertyName in geoObject) {
   					// propertyName is what you want
					//console.log("name: "+propertyName);
					i++;
					if(i>10)
					break;
   					// you can get the value like this: myObject[propertyName]
				}
				var cubeGeometry, cubeMaterial;
                cubeGeometry = new THREE.CubeGeometry(100, 100, 100, 2, 2, 2);
                cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xFFFF00, shading: THREE.FlatShading, overdraw: true });
                 
				 
				cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
				cube.position.x = 0;
				cube.position.y = -500;
				cube.position.z = 0;
				cube.scale.x = 1;
				cube.scale.y = 1;
				cube.scale.z = 1;
				
				//geoObject.add(cube);
				for(var i=0; i< totleEnemy; i++){
					enemies[i].name = i;
					geoObject.add(enemies[i]);
					//console.log("i= "+i);
				}
				var light = new THREE.PointLight(0xffffff);
				light.position.set(0,0,0);
				geoObject.add(light);
				ARGON.World.add( geoObject );
				/*
				var i=0;
				for(var typeName in ARGON){
					console.log(i+typeName);
					i++;
					if(i>10){
						break;
					}
				}*/
				
				//console.log("camera");
				var gameInfoCanvas = document.createElement('canvas');
				gameInfoCanvas.width = 300;
				gameInfoCanvas.height = 50;
				gameInfoCanvas.style.border = "1px inset brown";
				var gameInfoDiv = document.getElementById("gameInfo");
				gameInfoDiv.appendChild(gameInfoCanvas);
				textContext = gameInfoCanvas.getContext('2d');
				
				enemiesLeft = 20;
				defenseGame.updateText();
				
				document.addEventListener('touchstart',function(ev) {

					if (ev.touches.item(0) == ev.targetTouches.item(0)) {
						//defenseGame.playSound("http://www.prism.gatech.edu/~xxie37/aro/game1/shooting.mp3");
						//var sound_example = new Audio("http://www.prism.gatech.edu/~xxie37/aro/game1/shooting.mp3");
						//sound_example.play();
						console.log("touchable 1");
						var camera = ARGON.threeCamera;
						var projector = new THREE.Projector();
						for(var i=0; i< totleEnemy; i++){
							p3D = new THREE.Vector3(enemies[i].position.x,enemies[i].position.y,enemies[i].position.z);
							p2D = new THREE.Vector3(0,0,0);
						
							p2D = projector.projectVector(p3D, camera);
							p2D.x = (p2D.x + 1)/2 * 320;
							p2D.y = - (p2D.y - 1)/2 * 568;
							if(p2D.x < 210&&p2D.x>110 && p2D.y >234 && p2D.y <334 && enemies[i].scale.x != 0.00001 ){
								enemies[i].scale.x = 0.00001;
								enemiesDead[i] = true;
								
								/*
								var obj = geoObject.getChildByName(i);
								if(obj != null){
									geoObject.remove(obj);
								}*/
								//var gameInfoDiv = document.getElementById("gameInfo");
								enemiesLeft--;
								console.log(enemiesLeft);
								defenseGame.updateText();
								//gameInfoDiv.innerHTML = "Enemies Left:" + enemiesLeft;
							} 
						}
					}

				}, false);	
				
				
				ARGON.onRender = defenseGame.update;
	
			},
			loadModels:function(){
				loader = new THREE.ColladaLoader();
				loader.options.convertUpAxis = true;
				totleEnemy = 20;
				enemies = new Array();
				enemiesDir = new Array();
				enemiesPos = new Array();
				enemiesDead = new Array();
			
				loader.load( 'models/beholder/beholder.dae', function ( collada ) {
					for(var i=0; i< totleEnemy; i++){		
						model = collada.scene.clone();
						model.scale.x = model.scale.y = model.scale.z = 30;	
						fai = Math.random()*6.28;
						sita = Math.random()*3.14*50/180;
						model.rotation.x = Math.random()*3.14;
						model.position.x = 500*Math.cos(sita)*Math.sin(fai);
						model.position.y = 500*Math.sin(sita);
						model.position.z = 500*Math.cos(sita)*Math.cos(fai);
						//model.position.x = 500-i*100;
						dir = new Object();
						pos = new Object();
						dir.phi = (Math.random()-0.5)/50;
						dir.theta = (Math.random()-0.5)/50;
						enemiesDir[i] = dir;
						pos.phi = fai;
						pos.theta = sita;
						enemiesPos[i] = pos;
						enemies[i] = model;
						enemiesDead[i] = false;
						
					}
					defenseGame.initialization();
				});				
			},
			setGeoObject:function(){				
			},
			draw:function(){
			},
			update:function(time){
				var lat   = ARGON.geolocation.getLLA().latitude;
				var lon   = ARGON.geolocation.getLLA().longitude;
				var alt   = ARGON.geolocation.utm.altitude;
				//geoObject.latitude = lat;
				//geoObject.longitude = lon;
				//geoObject.altitude = alt;
				geoObject.geolocation.setGeoPosition(lat,lon,alt);
				for(var i=0; i< totleEnemy; i++){
					//console.log(enemiesPos[i].theta);
					if(enemiesPos[i].theta>3.14*50/180 || enemiesPos[i].theta<0)
					{
						enemiesDir[i].theta = -enemiesDir[i].theta;
					}
					else if(Math.random()<0.01){
						enemiesDir[i].phi = (Math.random()-0.5)/50;
						enemiesDir[i].theta = (Math.random()-0.5)/50;
					}
					enemiesPos[i].theta +=enemiesDir[i].theta;
					enemiesPos[i].phi +=enemiesDir[i].phi;
					
					if(!enemiesDead[i]){ 
						enemies[i].position.x = 500*Math.cos(enemiesPos[i].theta)*Math.sin(enemiesPos[i].phi);
						enemies[i].position.y = 500*Math.sin(enemiesPos[i].theta);
						enemies[i].position.z = 500*Math.cos(enemiesPos[i].theta)*Math.cos(enemiesPos[i].phi);
						enemies[i].rotation.x+=0.1;
						enemies[i].rotation.y+=0.1;
					}
					else{
						enemies[i].position.y -=10;
					}						
				}
			},
			updateText:function(){
				//var textContext = radar.canvas.getContext('2d');
				
				textContext.clearRect ( 0 , 0 , 300 , 80 );
				textContext.font = "Bold 20px Arial";
				textContext.fillStyle = "rgba(255,0,0,0.95)";
				textContext.fillText("Enemies Left:" + enemiesLeft, 10, 30);
			
			},
			playSound:function(soundfile) {
				 document.getElementById("shootingSFX").innerHTML = 
			 	"<embed src='"+soundfile+"' hidden='true' autostart='true' loop='false' />";
			}
		}
	
	</script>
	
	<script>
		var canvas = document.createElement('canvas');
		canvas.width = 150;
		canvas.height = 150;
		var crossDiv = document.getElementById("cross");
		crossDiv.appendChild(canvas);
		var context = canvas.getContext('2d');
		var imageObj = new Image();
		imageObj.src = "http://www.prism.gatech.edu/~xxie37/aro/game1/cross.png";
        imageObj.onload = function() {
       		context.drawImage(imageObj, 0, 0, 150, 150 * imageObj.height / imageObj.width );
			console.log("asfasd");
        };		
        //document.addEventListener("AR.DataSetLoadedEvent", myAppController.onDataSetLoaded);
	    //document.addEventListener("AR.DataSetActivatedEvent", myAppController.onDataSetActivated);
	    document.addEventListener("AR.ArgonReadyEvent", defenseGame.loadModels());
			
    </script>
	
	

</body>
</html> 